import React, { FC, memo } from 'react';
import { Dropdown, Button } from 'antd';
import {
  DownOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons';

import styles from './index.less';
import UserMenu from './menu';

interface headerProps {
  collapsed: boolean;
  toggleCollapsed: () => void;
}

const Header: FC<headerProps> = (props) => {
  const { toggleCollapsed, collapsed } = props;

  const userinfo = {
    hesdPortrait:
      'https://img1.baidu.com/it/u=2716398045,2043787292&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    name: '木别离',
  };

  return (
    <div className={styles.header_info}>
      <div className={styles.title}>
        <Button onClick={toggleCollapsed} style={{ marginLeft: 16 }}>
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
          )}
        </Button>
      </div>
      <div className={styles.info}>
        <Dropdown overlay={<UserMenu></UserMenu>} placement="bottomLeft">
          <div className={styles.user} style={{ cursor: 'pointer' }}>
            <img src={userinfo.hesdPortrait} alt="" />
            <span className={styles.name}>{userinfo.name}</span>
            <span style={{ paddingLeft: '8px' }}>
              {' '}
              <DownOutlined />
            </span>
          </div>
        </Dropdown>
      </div>
    </div>
  );
};

export default memo(Header);
